/* === Color Themes === */
.theme-mixin(@colorName, @color, @colorHex) {
    //Plain color and links
    //Buttons
    .theme-@{colorName} .button:not(.button-fill) {
        border-color: @color;
        color: @color;
        &:active {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
        //恢复功能按钮的颜色
        .button-themes();
    }
    .theme-@{colorName} .button.button-fill {
        background: @color;
        color:#fff;
        //恢复功能按钮的颜色
        .button-themes();
    }
    //Icons
    .theme-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    // Theme
    .theme-@{colorName} {
        a, .item-link.list-button {
            color: @color;
        }
        .bar& {
            a, a i {
                color:inherit;
            }
            a.active, a.active i {
                color:@color;
            }
        }
        .tab-item.active {
          color: @color;
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
        .buttons-tab:after {
          background: @color;
        }

        .modal-button {
          color: @color;
        }
        .actions-modal-button:not(.color-danger):not(.bg-danger) {
          color: @color;
        }
    }
    .swiper-pagination {
        .theme-@{colorName} & {
            .swiper-pagination-bullet-active {
                background-color: @color;
            }
        }
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        .theme-@{colorName} & {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#@{colorHex}'/></svg>");
        }
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        .theme-@{colorName} & {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#@{colorHex}'/></svg>");
        }
    }
}
.theme-mixin(e('green'), #3cac46, '3cac46');
.theme-mixin(e('pink'), #d94b73, 'd94b73');
.theme-mixin(e('yellow'), #efb51e, 'efb51e');
